<template>
  <div class="payInfo">
    <div class="tiket">
      <div class="card">
        <h3>交费详情</h3>
        <ul class="form">
          <li>
            <p>党员姓名</p>
            <p>{{data.name}}</p>
          </li>
          <li>
            <p>党支部</p>
            <p>{{data.org_name}}</p>
          </li>
          <li>
            <p>交费金额</p>
            <p>{{data.misuse}}元</p>
          </li>
          <li>
            <p>交费月份</p>
            <p>{{data.create_time|timeType('m')}}月</p>
          </li>
          <li>
            <p>交费截止时间</p>
            <p>{{data.create_time|timeType('y')}}-{{data.create_time|timeType('m')}}-{{data.end_time}} 23:59</p>
          </li>
          <li>
            <p>交费时间</p>
            <p>{{data.pay_time}}</p>
          </li>
          <li>
            <p>交费类别</p>
            <p>逾期补交</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="shadow">
      <img src="@as/img/pay_info_shadow.png" alt>
    </div>
  </div>
</template>

<script>
// import { time } from '../../utils/index'
export default {
  data () {
    return {
      id:null,
      data:{}
    }
  },
  created() {
    if(this.$route.query.id){
      this.id = this.$route.query.id
    }
    this.getPayInfo()
  },
  methods: {
    async getPayInfo () {
      try {
        let params = {
          id: this.id,
        }
        const url = `applets/Pay/pay_info`
        let res = await this.$http.get(url, params)
        this.$progress.done()
        if (res.code === 200) {
          this.data = res.data
        }
      } catch (e) {
        console.log('​catch -> e', e)
      }
    }
  },
  components: {

  }
}
</script>

<style lang="scss" scoped>
.payInfo{
  position: relative;
  padding: 40px 16px;
  box-sizing: border-box;
  .tiket{
    position: relative;
    z-index: 99;
    .card{
      width:100%;
      height:501px;
      background:rgba(254,254,254,1);
      border-radius:10px;
      h3{
        margin: 0;
        position: relative;
        width:100%;
        height:60px;
        line-height: 60px;
        background:rgba(235,77,68,1);
        border-radius:10px 10px 0 0;
        padding: 0 16px;
        font-size:20px;
        font-family:PingFang-SC-Medium;
        font-weight:bold;
        color:rgba(255,255,255,1);
        &::before{
          content:'';
          position: absolute;
          left: 0;
          bottom: 0;
          transform: translate(-50%,50%);
          height: 14px;
          width: 14px;
          border-radius: 50%;
          background-color: #fff;
        }
        &::after{
          content:'';
          position: absolute;
          right: 0;
          bottom: 0;
          transform: translate(50%,50%);
          height: 14px;
          width: 14px;
          border-radius: 50%;
          background-color: #fff;
        }
      }
      .form{
        width:100%;
        height:calc(100% - 60px);
        background:rgba(254,254,254,1);
        border-radius:10px;
        box-sizing: border-box;
        padding: 37px 16px;
        li{
          list-style: none;
          display: flex;
          justify-content: space-between;
          line-height: 51px;
          height: 51px;
          p{
            font-size:15px;
            font-family:PingFang-SC-Medium;
            &:first-of-type{
              font-weight:500;
              color:rgba(102,102,102,1);
            }
            &:last-of-type{
              font-weight:bold;
              color:rgba(51,51,51,1);
            }
          }
        }
      }
    }
  }
  .shadow{
    z-index: 98;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    img{
      width: 100%;
    }
  }
}
</style>
